<template>
  <view>
    <view>
      <swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
              :vertical="true" @animationfinish="animationfinish" @change="change" :current="current"
              :indicator-dots="false" :circular="true">
        <swiper-item v-for="(list,index) in dataList" :key="index">
          <view v-if="k==index" style="width: 100%;height: 100%">
            <video v-if="isShowVideo" :id="list.id+'_'+index" :autoplay="true" enable-play-gesture
                   :controls="true" :show-center-play-btn="true" play-btn-position="center" :http-cache="true"
                   :show-play-btn="true" :show-fullscreen-btn="false" :show-loading="true"
                   enable-progress-gesture :src="list.mp4_url" @ended="ended" @play="play()"
                   :style="'width: 100%; height: 100%; background-color: #000000;'" object-fit="cover"
                   :poster="dataList[k].tv_image">
            </video>
            <view v-if="!isShowVideo" @click="click_tvimg()">
              <image :src="dataList[k].tv_image" mode="aspectFit"
                     :style="'width: 100%; height: 100%; background-color: #000000;'">
              </image>
            </view>
          </view>
        </swiper-item>
      </swiper>


      <view class="userInfo">
        <!-- 2.点赞 -->
        <view v-if="dataList[k]" @click="cLike(dataList[k].isLike)" class="icon_box">
          <image :src="dataList[k].isLike?'/static/images/xin.png':'/static/images/xin-2.png'" class="icon_img"/>
          <view class="tn-text-sm tn-color-white" :class="{'dm-main-text-color':dataList[k].isLike}">
            {{dataList[k].like_num>0?dataList[k].like_num:0}}
          </view>
        </view>
        <!-- 4.分享 -->
        <view style="opacity: 0.9; margin-top: 40rpx;">
          <view style="opacity: 0;">
            <u-button openType="share" text="分享"></u-button>
          </view>
          <view style="display: flex;flex-direction: column;align-items: center;margin-top: -90rpx;">
            <image src="@/static/images/wx.png" class="icon_img"/>
            <text class="tn-text-sm tn-color-white">分享</text>
          </view>
        </view>
      </view>


      <!-- 最底下的文字部分 -->
      <view class="choseContent">
        <view v-if="dataList[k]" class="choseSeries" @click="toVideoDetail(dataList[k])">
          <view>{{dataList[k].tv_name}}·看全集·第 {{dataList[k].series}} 集 <u-icon class="tn-margin-left" name="arrow-up" size="30rpx" color="#fff" labelColor="#fff" /></view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
import {hideLoading, showLoading} from "../../../utils/utils";
import common_mixin from '@/libs/mixin/common_mixin.js'

export default {
  mixins: [common_mixin],
  components: {
  },
  data() {
    return {
      shenheState: true,
      isShowVideo: false,
      windowWidth: 0,
      windowHeight: 0,
      platform: "",
      deleteHeight: 0,
      dataList: [],
      k: 0,
      current: 0,
      boxStyle: { //视频，图片封面样式
        'height': 0,
        'width': 0,
      },
    }
  },
  watch: {
    k(k, old_k) {
      console.log("k=", k, "old_k=", old_k);
      this.isShowVideo = false;

      //延迟0.5秒，用户观感更顺滑
      setTimeout(() => {
        this.isShowVideo = true;
      }, 500)
      this.checkLike()
    }
  },
  async onLoad(option) {
    console.log('onload');
    this.platform = uni.getSystemInfoSync().platform
    this.windowWidth = uni.getSystemInfoSync().windowWidth
    this.windowHeight = uni.getSystemInfoSync().windowHeight
    showLoading("加载中")
    this.dataList = await this.getRecommendTvList();
    hideLoading()
  },
  async onShow() {

    // // 如果后台未设置推荐视频,则弹窗提示
    // if (!this.dataList || this.dataList.length == 0) {
    //   uni.showModal({
    //     title: '提示',
    //     content: '暂无推荐视频',
    //     showCancel: false,
    //     confirmText: "返回首页", // 确认按钮的文字
    //     success: (res) => {
    //       if (res.confirm) {
    //         uni.switchTab({
    //           url: "/pages/index/index"
    //         })
    //       }
    //     }
    //   })
    //   return;
    // }
    console.log('回到前台');
    this.isShowVideo = true;
  },
  onHide() {
    this.isShowVideo = false;
    console.log('页面隐藏');
  },
  methods: {
    async checkLike () {
      let episodeId = this.dataList[this.k].id;
      let params= {
        series_id:episodeId,
      };
      let data = await this.$api.checkLike(params)
      this.dataList[this.k].isLike = data.isLike
    },
    async getRecommendTvList() {
      let data = await this.$api.getRecommendTvList();
      return data.recommendTvList
    },
    ended() {
      if (this.k == this.dataList.length - 1) {
        this.isShowVideo = false;
        uni.showModal({
          content: "暂无推荐视频",
          showCancel: false,
          confirmText: "返回",
          success(res) {
            if (res.confirm) {
              uni.switchTab({
                url: "/pages/index/index"
              })
            }
          }
        })
      } else {
        this.current = this.k + 1
      }
    },
    //开始播放触发
    play(tv_id) {
      // console.log(tv_id + "开始播放啦");
    },
    change(event) {
      this.k = event.detail.current
    },
    async animationfinish(event) {
      // 1.这里进行判断，如果是最后3个视频就加载视频进入列表
      // if (this.k > this.dataList.length - 3) {
      //   let datalist = await this.getRecommendTvList();
      //   console.log("加载推荐数据，dataList length:",this.dataList.length)
      //   if (this.dataList.length>100) {
      //     // 截取最后10条
      //   }
      //   this.dataList = this.dataList.concat(datalist)
      // }
    },
    async cLike() {
      this.dataList[this.k].isLike = !this.dataList[this.k].isLike
      const video = this.dataList[this.k];
      let episodeId = this.dataList[this.k].id;
      let params =  {
        series_id:episodeId,
      };
      if (this.dataList[this.k].isLike) {
        this.dataList[this.k].like_num = video.like_num * 1 + 1
        await this.$api.clickLike(params)
      } else {
        this.dataList[this.k].like_num = video.like_num * 1 - 1
        await this.$api.removeLike(params)
      }
    },
    click_tvimg() {
      this.isShowVideo = true;
    },
  }
}
</script>

<style>
.userInfo {
  z-index: 999;
  position: absolute;
  bottom: 110px;
  right: 10px;
  display: flex;
  flex-direction: column;
}
.choseContent {
  z-index: 99;
  position: absolute;
  bottom: 40px;
  padding: 15rpx;
  flex-direction: column;
  justify-content: flex-start;
  color: #ffffff;
}
.choseSeries {
  background-color: #2c2b2b;
  padding: 8px 15px;
  border-radius: 22rpx;
}
.icon_box {
  opacity: 0.9;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon_img {
  width: 28px;
  height: 28px;
}
</style>
